<template>
  <div>
    <Table :goodList="goodList">
      <template #header>
        <th>#</th>
        <th>商品名称</th>
        <th>价格</th>
        <th>标签</th>
        <th>操作</th>
      </template>

      <template #body="{ data, index }">
        <td>{{ data.id }}</td>
        <td>{{ data.goods_name }}</td>
        <td>¥ {{ data.goods_price }}</td>
        <td>
          <span
            v-for="(item, index) in data.tags"
            :key="index"
            class="badge btn-danger"
            >{{ item }}</span
          >
        </td>
        <td>
          <button @click="del(index)" class="btn btn-danger btn-sm">
            删除
          </button>
        </td>
      </template>
    </Table>
  </div>
</template>

<script>
export default {
  created() {
    this.getGoodList();
  },
  data() {
    return {
      goodList: [],
    };
  },
  methods: {
    async getGoodList() {
      const {
        data: { data, status },
      } = await this.request ({
        url: "/api/goods",
        method: "get",
      });
      if (status !== 0) return console.log("获取商品列表失败!");
      this.goodList = data;
    },
    del(index) {
      this.goodList.splice(index, 1);
    },
  },
};
</script>

<style scoped>
.badge {
  margin-right: 5px;
}
</style>